<template>
    <div class="bgDiv">
  
      <!-- vue事件 -->
      <button @click="clickButton(number,$event)">点我提示</button>
      <!-- 事件修饰符 -->
      <a href="www.baidu.com" @click.prevent="clickButton(number,$event)">事件修饰符</a>
      <!-- 阻止事件冒泡 -->
      <div class="bomView" @click="clickButton(number,$event)">
        <button @click.stop="clickButton(number,$event)">点我提示</button>
      </div>
      <!-- 键盘事件 -->
      <input type="text" placeholder="点击键盘" @keyup="clickUp">
    </div>
  </template>
  
  <script>
  
  export default {
    name: '',
    components: {},
    data() {
      return {
        number:66
      }
    },
    mounted() {
    
	},
    created(){

    },
    methods:{
      clickButton(btn,event){
        // event.preventDefault(); == @click.prevent
        alert("事件修饰符")
      },
      clickUp(e){
        console.log(e.key)
      }
    }
  }
  </script>
  
  <style scoped>
  .bomView{
    height: 5rem;
    width: 5rem;
    background-color: aqua;
  }
  </style>
  